@import 'src/utils/utils';

.main {
  flex-shrink: 0;
  width: 75vw !important;

  .line {
    margin: 0;
    padding: 0;
    cursor: text;
    min-height: 20px;
    display: block;

    @include mono-font;
    color: var(--white);

    word-wrap: break-word !important;
    white-space: pre-wrap !important;
  }
}

.pipelineSteps {
  padding: 10px 20px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 5px;

  &::before {
    content: '';
    height: 10px;
    width: 100%;
    background-color: var(--black);
    position: absolute;
    top: 64px;
    z-index: 1;
  }

  .stepContainer {
    display: flex;
    flex-direction: column;
    word-break: break-all;
  }

  .stepHeader {
    display: flex;
    align-items: center;
    min-height: 34px;
    border-radius: 6px;
    padding: 0 10px 0 6px;
    position: sticky;
    top: 74px;
    z-index: 2;
    background-color: var(--black);

    &.expanded {
      .chevron {
        transform: rotate(90deg);
      }
    }

    .chevron {
      transition: transform 0.2s ease;
    }

    &:hover {
      background-color: #22222aa9;
    }

    &.selected {
      background-color: #22222a;
    }

    &.selected .name {
      color: var(--primary-7) !important;
      font-weight: 600 !important;
    }

    .name {
      color: #b0b1c3 !important;
      font-weight: 400 !important;
      font-size: 14px !important;
      font-family: var(--font-family-mono);
    }
  }

  .stepLogContainer {
    padding: 15px 10px 15px 36px;
    flex-shrink: 0;

    .consoleLine {
      color: var(--white);

      @include mono-font;

      word-wrap: break-word !important;
      white-space: pre-wrap !important;
      cursor: text;
      margin: 0;
      padding: 0;

      &:empty {
        display: inline-block;
        min-height: 20px;
      }
    }
  }
}
